<template>

  <el-container>
    <el-header>
      <el-menu
          :default-active="activeIndex"
          class="HomeChoose"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          router
      >
        <el-menu-item index="0">
          <img
              style="width: 60px"
              src="../logo.png"
              alt="SC logo"
          />
        </el-menu-item>
        <div class="flex-grow"/>
        <el-menu-item index="home">
          <el-icon>
            <House/>
          </el-icon>
          首页
        </el-menu-item>
        <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span></template>
          <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
            <el-icon>
              <component :is="child.icon"></component>
            </el-icon>
            {{ child.name }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="announcement">
          <el-icon>
            <Help/>
          </el-icon>
          公告
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <Phone/>
          </el-icon>
          联系我们
        </el-menu-item>

        <div class="IDpicture">
          <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
            <template #suffix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
          <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
      </el-menu>

    </el-header>

    <el-main>
      <div>
        <qrcode-vue :text="data" :size="300" @click="scanQRCode" style="margin-left: 150px"/>
      </div>
      <div style="padding:50px 20px 20px 20px;background-color:white" class="visitor-registration-container">
        <p class="welcome-text">访客登记</p>
        <el-form :model="visitorInfo" :rules="visitorRules" ref="visitorForm" label-width="80px" class="visitor-form">
          <p style="margin-bottom: 5px;margin-top: 10px;margin-left: 20px">用户名</p>
          <el-input class="username-input" v-model="visitorInfo.visitorName" style="width: 520px; margin-left: 20px" prop="visitorName" placeholder="请输入用户名"></el-input>

          <p style="margin-bottom: 0px;margin-top: 5px;margin-left: 20px">邮箱</p>
          <el-input class="email-input" v-model="visitorInfo.visitorEmail" style="width: 520px;margin-left: 20px;margin-top: 5px"  prop="visitorEmail" placeholder="请输入邮箱"></el-input>

          <p style="margin-bottom: 0px;margin-top: 5px;margin-left: 20px">手机号</p>
          <el-input class="phone-input" v-model="visitorInfo.visitorPhoneNumber" style="width: 520px;margin-left: 20px;margin-top: 5px"  prop="visitorPhoneNumber" placeholder="请输入手机号"></el-input>

          <p style="margin-bottom: 0px;margin-top: 5px;margin-left: 20px">地址</p>
          <el-input class="address-input" v-model="visitorInfo.visitorAddress" style="width: 520px;margin-left: 20px;margin-top: 5px"  prop="visitorAddress" placeholder="请输入地址"></el-input>

          <p style="margin-bottom: 0px;margin-top: 5px;margin-left: 20px">身份证号</p>
          <el-input class="id-number-input" v-model="visitorInfo.visitorIdNumber" style="width: 520px;margin-left: 20px;margin-top: 5px"  prop="visitorIdNumber"placeholder="请输入身份证号"></el-input>

          <p style="margin-bottom: 0px;margin-top: 5px;margin-left: 20px">来访事由</p>
          <el-input class="visit-reason-input" v-model="visitorInfo.visitorReason" style="width: 520px;margin-left: 20px;margin-top: 5px" prop="visitorReason"  placeholder="请输入来访事由"></el-input>

          <el-form-item>
            <el-button type="primary" style="width:100px;margin-left: 140px;margin-top: 10px" @click="submitForm('visitorInfo')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
    <el-footer>

    </el-footer>
  </el-container>

</template>
<script setup>
import QrcodeVue from 'vue-qrcode-component';
import {ref, reactive, onMounted} from 'vue';
import { ElMessage } from 'element-plus'; // 假设你使用了Element Plus的message组件，确保先导入
import *as visitor from '../api/visitor'
import {useStore} from "vuex";
import {useRouter} from "vue-router";


// 使用ref定义响应式的基本类型值
const activeIndex = ref('1');

// 定义响应式数据
const data = ref('http://192.168.43.250:8080/'); // 二维码中包含的信息
const inputValue = ref('');

// 定义方法
const scanQRCode = () => {
  // 这里可以调用扫描二维码功能，用户输入的信息会存储在 inputValue 中
  // 注意：在<script setup>中，方法不需要再声明在methods中，直接定义即可
};

// 注册组件
const components = {
  QrcodeVue
};
// 使用reactive定义响应式对象
const visitorInfo = reactive({
  visitorName: '',
  visitorEmail: '',
  visitorPhoneNumber: '',
  visitorAddress: '',
  visitorIdNumber: '',
  visitorReason: ''
});
const router = useRouter();
const store = useStore();
const visitorRules = reactive({});
// 假设这里有具体的规则对象，这里只是占位
onMounted(()=>{


})


const submitForm = () => {
  const visitForm = { ...visitorInfo };
  visitor.addVisitor(visitForm).then(res => {
    console.log(res);
    ElMessage.success('提交成功！');
    // 可以在此处添加额外的操作，如页面跳转
  }).catch(error => {
    console.error('提交失败:', error);
    ElMessage.error('提交失败，请重试！');
  });
};

const resetForm = (formName) => {
  const formRef = ref(null); // 同样，确保在模板中对formRef进行了绑定
  formRef.value.resetFields();
};
// 注意：在<script setup>中，你不能直接使用this关键字，因为没有this上下文。
// 且需要确保在模板中引用的变量和函数都是通过ref或reactive声明的。
const menu_data=ref([

  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/index/Shopping',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/Order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },
])

</script>
<style scoped>
.el-container {
  height: 100vh; /* 让容器高度充满整个视口 */
  display: flex;
  flex-direction: column; /* 改变主轴方向为垂直 */
}

.el-header {
  flex: 0 0 10%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  padding: 0 0px; /* 添加内边距以防止内容贴近边缘 */
}

.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  flex: 1; /* main占据剩余空间 */
  display: flex; /* 使main支持Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 20px; /* 添加内边距 */
  background-size:2000px 780px;
}
.footer-text {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  width: 100%;
  padding-left: 5%; /* 距离左侧10% */
}
.visitor-registration-container {
  /*居中*/
  width: 600px;
  height: 600px;
  margin: 0px 130px 0px 300px;
  border: 1px solid #DCDFE6; /* 添加灰色边框，宽度为1px */
  border-radius: 10px; /* 为盒子添加圆角效果 */
  padding: 20px 20px 20px 20px; /* 为盒子内部添加内边距 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.8)
}
.welcome-text {
  margin: -20px 0px 20px 10px;
  color: #333; /* 文本颜色 */
  margin-bottom: 35px; /* 与表单之间的间距 */
  font-size: 30px; /* 字体大小 */
  font-weight: bold;
}
.searchFunction{
  height: 28px;
  width: 80%;
  right: 40px;
}
/*头部边框阴影*/
.HomeChoose{
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0,0,0,0.1);
  display: flex;
}
.flex-grow {
  flex-grow: 0;
}
.IDpicture{
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%;/* 调整左右内边距 */
}
</style>